import { Chart } from "@antv/g2";
import {containnerData} from "./data"
import { useEffect } from "react";

//折线图
const ContainnerChart=()=>{
    
      useEffect(()=>{
        const chart = new Chart({
            container: 'containnerChart',
            autoFit: true,
            height: 500,
            width:400
          });
          chart.options({
            type: "view",
            autoFit: true,
            data: containnerData,
            encode: { x: "month", y: "temperature", color: "city",shape: 'smooth' },
            scale: { x: { range: [0, 1] }, y: { nice: true } },
            axis: { y: { labelFormatter: (d:any) => d + "°C" } },
            children: [
              { type: "line", encode: { shape: "smooth" } },
              { type: "point", encode: { shape: "point" }, tooltip: false },
            ],
            legend: {
              size:[14]
            },
          });
        chart.render();
      },[])
     
    return (
        <div id="containnerChart"></div>
    )
}
export default ContainnerChart;